﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="DateEdit#DisplayFormat" />Display Format</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.DisplayFormat">DisplayFormat</a>
        property to format our Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1">Date Edit</a>’s
        display value when the editor is not focused, and use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.Format">Format</a>
        property to format the editor’s value in edit mode when the editor is focused. If the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.DisplayFormat">DisplayFormat</a>
        property is not set, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.Format">Format</a> is applied in both display and edit modes.
    </p>
    <p>
        The DevExpress Blazor Date Edit supports standard formats. See the <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings">Standard Date and Time Format Strings</a>
        and <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings">Custom Date and Time Format Strings</a> help topics for more information.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Enter a date" />
    </div>
    <div class="card-body mw-480">
        <DxDateEdit @bind-Date="@DateTimeValue" DisplayFormat="D" Format="d" SizeMode="SizeMode"></DxDateEdit>
    </div>
</div>

<CodeSnippet_Editor_DateEdit_DisplayFormat />

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}
